/*
 * @LastEditors: yuSeen
 * @LastEditTime: 2022-01-11 12:36:35
 */
import SvgIcon from "@/components/SvgIcon/SvgIcon";
import config from "@/config/config";
import { useUser } from "@/hooks/user/useUser";
import { getLoginQrcode, getLoginQrcodeStatus } from "@/service/api/user/login";
import { qrcodeStatus } from "@/service/api/user/types";
import { getSimpleCookie } from "@/utils/util";
import { message } from "antd";
import React, { memo, useEffect, useState } from "react";
import "./style.scss";

interface ILoginProps {
  visible: boolean;
  close?: () => void;
}
//@ts-ignore
const ipcRenderer = window.ipcRenderer;
// 跳转外部链接
const toApp = (e: any) => {
  if (config.isElectron) {
    e.preventDefault();
    const href = e.target.href;
    ipcRenderer.send("openUrl", href);
  }
};

const Login: React.FC<ILoginProps> = memo(({ close, visible }) => {
  console.log("5465");

  const [qrKey, setQrKey] = useState(""), // 二维码key
    [qrImgSrc, setQrImgSrc] = useState(""); // 二维码地址
  const { setToken, updateUserInfo } = useUser();
  // 轮询定时器
  let getStatusInter: NodeJS.Timer;
  // 关闭登录窗口
  const closeLoginWindow = () => {
    if (config.isElectron) {
      ipcRenderer.send("close-login-window");
      clearInterval(getStatusInter);
    } else {
      close && close();
      clearInterval(getStatusInter);
    }
  };
  // 获取登录二维码
  const getQrcode = async () => {
    const {
      data: { qrimg, key },
    } = await getLoginQrcode();
    setQrImgSrc(qrimg);
    setQrKey(key);
  };

  useEffect(() => {
    getQrcode();
    !visible && clearInterval(getStatusInter);
  }, [visible]);
  useEffect(() => {
    // 轮询扫码登录状态
    const getStatus = () => {
      getStatusInter = setInterval(async () => {
        if (qrKey !== "") {
          // @ts-ignore
          const { code, cookie } = await getLoginQrcodeStatus(qrKey);
          switch (code) {
            case qrcodeStatus.已过期:
              await getQrcode();
              clearInterval(getStatusInter);
              getStatus();
              break;
            case qrcodeStatus.等待扫码:
              break;
            case qrcodeStatus.待确认:
              break;
            case qrcodeStatus.授权登录成功:
              setToken(getSimpleCookie(cookie));
              updateUserInfo();
              clearInterval(getStatusInter);
              message.success("登陆成功");
              closeLoginWindow()
              break;
          }
        }
      }, 3000);
    };
    getStatus();
    return () => clearInterval(getStatusInter);
  }, [qrKey]);

  return (
    <div className="login drag">
      <div className="close flex-c">
        <SvgIcon
          name="close-icon"
          size={18}
          hover
          className="closeIcon no-drag"
          click={closeLoginWindow}
        ></SvgIcon>
      </div>
      <div className="title flex-c-c no-drag">扫码登录</div>
      <div className="loginContent no-drag">
        <div className="tipImg">
          <img src="https://s2.music.126.net/style/web2/img/qr_guide.png?a367711820ecdf97f0430e781112d15c" />
        </div>
        <div className="qrCode flex-col-b-c">
          <img src={qrImgSrc} />
          <div className="mt-4">
            使用
            <a
              href="https://music.163.com/#/download"
              target="_blank"
              onClick={(e) => toApp(e)}
            >
              网易云音乐APP
            </a>
            扫码登陆
          </div>
        </div>
      </div>
      <div className="more flex-c-c">选择其他登陆模式&gt;</div>
    </div>
  );
});

Login.defaultProps = {
  visible: false,
};

export default Login;
